axios.get('/dashboard').then(({ data: res}) =>{
let { overview,year,salaryData,groupData,provinceData} = res.data
for (let key in overview) {
  document.querySelector(`[name=${key}]`).innerHTML = overview[key]
}
lineChart(year)
classSalaryChart(salaryData)
groupSalaryChart(groupData)
sexSalaryChart(salaryData)
mapChart(provinceData)
})

function lineChart(data) {
    let myChart = echarts.init(document.querySelector('#line'))
    let option = {
        xAxis: {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: data.map(item => item.month),
            // x轴文字配置
            axisLabel: {
              color: '#999'
            },
            // 轴线设置
            axisLine: {
              // 轴线样式设置
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            // Y轴分割线配置
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          // 标题配置
          title: {
            text: '2022全学科薪资走势',
            top: 15,
            left: 10,
            textStyle: {
              fontSize: 16
            }
          },
          // 鼠标移入提示
          tooltip: {
            // trigger: 'item', // 鼠标放到具体的小点上，会提示
            trigger: 'axis' // 表示鼠标放到轴上即可触发
          },
          // 直角坐标系网格设置（图表的大小设置）
          grid: {
            top: '20%'
          },
          series: [
            {
              // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
              data: data.map(item => item.salary),
              type: 'line', // line表示折线图，bar表示柱状图，pie表示饼图
              smooth: true, // 表示使用平滑曲线
              lineStyle: {
                width: 6 // 线条粗细
              },
              symbolSize: 10, // 拐点处的标记大小
              // symbol: 'image://http://www.itcbc.com:3006/formdata/123.png' // 拐点处的标记
              // 区域面积颜色
              areaStyle: {
                color: {
                  type: 'linear', // 表示线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#499FEE' // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(255,255,255,0.2)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false。一般都不需要修改。（如果是true，则哪些数字0/1等等表示真实的像素值了）
                }
              }
            }
          ],
          // 线条的颜色（使用线性渐变）
          color: {
            type: 'linear', // 表示线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#5D75F0' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false。一般都不需要修改。（如果是true，则哪些数字0/1等等表示真实的像素值了）
          }
    }
    myChart.setOption(option)
}
// lineChart()

function classSalaryChart (data) {
  // console.log(data)
    let myChart = echarts.init(document.querySelector('#salary'))
    let option = {
        // 标题配置
        title: {
          text: '班级薪资分布',
          left: 10, // 10 表示10px
          top: 15,
          textStyle: {
            fontSize: 16
          }
        },
        // 鼠标移入的提示
        tooltip: {
          trigger: 'item'
        },
        // 图例的设置
        legend: {
          bottom: '6%',
          left: 'center'
          // itemWidth: 12
        },
        // 颜色的设置
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 系列数据
        series: [
          {
            name: '班级薪资分布', // 这个名字会显示在 提示框中
            type: 'pie', // 表示饼图
            radius: ['50%', '64%'], // 内外圈的半径
            // 每一项的样式
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // 文字标签不显示
            label: {
              show: false,
              position: 'center'
            },
            // 视觉引导线不显示
            labelLine: {
              show: false
            },
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1万-2万' },
            //   { value: 580, name: '1.5万-2万' },
            //   { value: 484, name: '2万以上' }
            // ]
            data: data.map(item => {
              return { value: item.g_count + item.b_count, name: item.label}
            })
          }
        ]
      }
      myChart.setOption(option)
}
// classSalaryChart()


function groupSalaryChart(data) {
    let myChart = echarts.init(document.querySelector('#lines'))
    let option = {
      // x轴，y轴，复制折线图（自己修改一下人名）
      xAxis: {
        type: 'category',
        // data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
        data: data[1].map(item => item.name),
        // x轴文字配置
        axisLabel: {
          color: '#999'
        },
        // 轴线设置
        axisLine: {
          // 轴线样式设置
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        // Y轴分割线配置
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      // 系列数据，需要两份数据，所以复制一个小对象（加入name属性，把数据改改）
      series: [
        {
          // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
          data: data[1].map(item => item.hope_salary),
          type: 'bar',
          name: '期望薪资'
        },
        {
          // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
          data: data[1].map(item => item.salary),
          type: 'bar',
          name: '实际薪资'
        }
      ],
      // 输入移入的提示
      tooltip: {},
      // 颜色设置 color: ['第1个柱子颜色', '第2个柱子颜色']
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      // 网格设置（向四外拉伸一下图表）
      grid: {
        top: 30,
        bottom: 50,
        left: 70,
        right: 30
      }
    }
    myChart.setOption(option)
    document.querySelector('#btns').addEventListener('click',function (e) {
      if (e.target.tagName === 'BUTTON') {
        let i = e.target.innerHTML
        document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')
        option.xAxis.data = data[i].map(item => item.name)
        option.series[0].data = data[i].map(item => item.hope_salary)
        option.series[1].data = data[i].map(item => item.salary)
        myChart.setOption(option)
      }
    })
  

  }
  // groupSalaryChart()

  function sexSalaryChart (data) {
    let myChart = echarts.init(document.querySelector('#gender'))
    let option = {
      // 标题配置
      title: [
        {
          text: '男女薪资分布',
          left: 10, // 10 表示10px
          top: 10,
          textStyle: {
            fontSize: 16
          }
        },
        {
          text: '男生',
          left: '45%', // 10 表示10px
          top: '45%',
          textStyle: {
            fontSize: 12
          }
        },
        {
          text: '女生',
          left: '45%', // 10 表示10px
          top: '85%',
          textStyle: {
            fontSize: 12
          }
        }
      ],
      // 鼠标移入的提示
      tooltip: {
        trigger: 'item'
      },
      // 颜色的设置
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      // 系列数据
      series: [
        {
          name: '男生薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          center: ['50%', '30%'], // 圆心点坐标
          radius: ['20%', '30%'], // 内外圈的半径
          // data: [
          //   { value: 1048, name: '1万以下' },
          //   { value: 235, name: '1万-2万' },
          //   { value: 580, name: '1.5万-2万' },
          //   { value: 484, name: '2万以上' }
          // ]
          data: data.map(item => {
            return { value: item.b_count, name: item.label}
          })
        },
        {
          name: '女生薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          center: ['50%', '70%'], // 圆心点坐标
          radius: ['20%', '30%'], // 内外圈的半径
          // data: [
          //   { value: 1048, name: '1万以下' },
          //   { value: 235, name: '1万-2万' },
          //   { value: 580, name: '1.5万-2万' },
          //   { value: 484, name: '2万以上' }
          // ]
          data: data.map(item => {
            return { value: item.g_count, name: item.label}
          })
        }
      ]
    }
      myChart.setOption(option)
}
// sexSalaryChart()

// --------------------------- 地图：籍贯分布 --------------------------------
const mapChart = (data) => {
  // console.log(data)
    const mapData = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 3 },
      { name: '天津', value: 2 },
      { name: '上海', value: 4 },
      { name: '重庆', value: 1 },
      { name: '河北', value: 20 },
      { name: '河南', value: 23 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 15 },
      { name: '黑龙江', value: 12 },
      { name: '湖南', value: 2 },
      { name: '安徽', value: 5 },
      { name: '山东', value: 18 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 5 },
      { name: '浙江', value: 1 },
      { name: '江西', value: 4 },
      { name: '湖北', value: 3 },
      { name: '广西', value: 2 },
      { name: '甘肃', value: 9 },
      { name: '山西', value: 11 },
      { name: '内蒙古', value: 14 },
      { name: '陕西', value: 14 },
      { name: '吉林', value: 10 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 3 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 1 },
      { name: '宁夏', value: 1 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ]
    mapData.forEach(item => {
      // 每循环一次，在接口返回的数据中，有没有这个省的数据。如果有把value换掉
      let res = data.find(v => {
        return v.name.includes(item.name)
      })
      if (res) {
        item.value = res.value
      }
    })
    let myChart = echarts.init(document.querySelector('#map'))
    let option = {
      // 视觉映射组件
      visualMap: {
        type: 'continuous', // continuous表示连续型； piecewise表示分段式
        min: 0,
        max: 20, // 看每个地区的学员多少，再来决定
        inRange: {
          color: ['#fff', '#0075F0']
        },
        text: [20, 0], // 两端的文字
        left: 40,
        bottom: 20
      },
      // 标题配置
      title: {
        text: '籍贯分布',
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      // 肯定需要配置的有：series
      series: [
        {
          name: '籍贯分布', // 添加系列数据的名字（和鼠标移入的提示有关系）
          type: 'map',
          map: 'china', 
          data: mapData,// 具体是什么地图
          // 显示文本标签（每个区域、每个省的名字）
          label: {
            show: true,
            color: 'rgba(0, 0, 0, 0.7)',
            fontSize: 10
          },
          // 每个区域（省）【默认】的样式
          itemStyle: {
            areaColor: '#E0FFFF',
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          // 高亮状态，每个区域的配置
          emphasis: {
            // 高亮状态下（鼠标移入状态，或者选中状态下）
            itemStyle: {
              areaColor: '#34D39A',
              borderWidth: 0,
              shadowBlur: 20,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          // 每个区域的数据
          data: mapData
        }
      ],
      // 鼠标移入的提示
      tooltip: {
        formatter: '{b}：{c}位学员', // {a}是series里面大的name；{b}表示每个区域的名字(省的名字)；{c}表示该地区的值
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderColor: 'transparent',
        textStyle: {
          color: '#fff'
        }
      }
    }
    myChart.setOption(option)
  }
  // mapChart()
